<template>
	<view>
		<view class="fixed">
			<view class="search-box">
				<u-search placeholder="请输入" v-model="keyword" :showAction="false" @search="onSearch"></u-search>
			</view>
			<view class="baozhang">
				<text>交易保障：</text>
				<view class="baozhang_txt">
					<u-icon name="checkmark-circle" color="#999" size="14"></u-icon>
					<view class="ml-10">真实在售</view>
				</view>
				<view class="">|</view>
				<view class="baozhang_txt">
					<u-icon name="checkmark-circle" color="#999" size="14"></u-icon>
					<view class="ml-10">在线交流</view>
				</view>
				<view class="">|</view>
				<view class="baozhang_txt">
					<u-icon name="checkmark-circle" color="#999" size="14"></u-icon>
					<view class="ml-10">无忧交易</view>
				</view>
			</view>
			<view class="icon_box">
				<view class="item" v-for="item,i in icon_list" :key="i" @click="toDetail(item)">
					<image class="item-img" :src="item.img" mode=""></image>
					<view class="item-name">{{item.name}}</view>
				</view>
			</view>

			<view class="tabs" :class="{is_fixed: isfixed}" id="boxFixed">
				<!-- 大类 -->
				<view class="tab_item" @click="showCate=true">
					<view class="text-overflow1" style="max-width: 150rpx;">{{cate.title}}</view>
					<u-icon :name="showCate?'arrow-up':'arrow-down'" color="#999" size="14"></u-icon>
				</view>
				<!-- 价格 -->
				<view class="tab_item" @click="showPrice=true">
					<view class="text-overflow1" style="max-width: 150rpx;">{{price}}</view>
					<u-icon :name="showPrice?'arrow-up':'arrow-down'" color="#999" size="14"></u-icon>
				</view>
				<!-- 类型 -->
				<view class="tab_item" @click="showSonCate=true">
					<view class="text-overflow1" style="max-width: 150rpx;">{{sonCate.title}}</view>
					<u-icon :name="showSonCate?'arrow-up':'arrow-down'" color="#999" size="14"></u-icon>
				</view>
				<!-- 地区 -->
				<view class="tab_item" @click="showArea=true">
					<view class="text-overflow1" style="max-width: 150rpx;">{{area.name}}</view>
					<u-icon :name="showArea?'arrow-up':'arrow-down'" color="#999" size="14"></u-icon>
				</view>
			</view>


		</view>

		<view class="list" v-if="list.length>0">
			<view v-for="(item,index) in list" :key="index" class="list_item" @click="goDetail(item)">
				<view class="top">
					<view class="top-left">{{item.cate_title}}</view>
					<view class="top-right">{{item.area}}</view>
				</view>
				<view class="title text-overflow2">{{item.title}}</view>
				<view class="bottom">
					<view class="tag">陪同过户</view>
					<view class="price">￥{{item.price}}</view>
				</view>
			</view>
		</view>
		<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<!-- 地区 -->
		<u-picker :show="showArea" :columns="areaColumns" keyName="name" @cancel="showArea=false"
			@confirm="confirmArea"></u-picker>
		<!-- 价格 -->
		<u-picker :show="showPrice" :columns="priceColumns" @cancel="showPrice=false"
			@confirm="confirmPrice"></u-picker>
		<!-- 大类 -->
		<u-picker :show="showCate" :columns="cateColumns" keyName="title" @cancel="showCate=false"
			@confirm="confirmCate"></u-picker>
		<!-- 类型 -->
		<u-picker :show="showSonCate" :columns="sonCateColumns" keyName="title" @cancel="showSonCate=false"
			@confirm="confirmSonCate"></u-picker>
	</view>
</template>

<script>
	import {
		getArea,
		getCate,
		getZiZhiList,

	} from '@/config/api.js'
	export default {

		data() {
			return {
				keyword: '',
				page: 1,
				list: [],
				nomore: false,
				icon_list: [{
					img: '/static/imgs/zr.png',
					name: '我要转让'
				}, {
					img: '/static/imgs/rz.png',
					name: '代入驻'
				}, {
					img: '/static/imgs/pg.png',
					name: '资质评估'
				}, {
					img: '/static/imgs/zizhi.png',
					name: '我要收购'
				}],
				menutop: '', //组件距离顶部的距离
				isfixed: false,
				scrollTop: 0,
				// 地区
				area: {
					name: '地区',
					value: 0
				},
				showArea: false,
				areaColumns: [],
				// 价格
				price: '价格',
				showPrice: false,
				priceColumns: [
					['全部', '3万以下', '3-10万', '10-30万', '30万以上']
				],
				// 大类
				cate: {
					title: '大类',
					id: 0,
					pid: 0
				},
				showCate: false,
				cateColumns: [],
				// 类型
				sonCate: {
					title: '类型',
					id: 0,
					pid: 0
				},
				showSonCate: false,
				sonCateColumns: [],

			};
		},
		onLoad(op) {
			// 监听筛选组件距离顶部的距离
			const query = uni.createSelectorQuery()
			query.select('#boxFixed').boundingClientRect()
			query.exec((res) => {
				console.log(res)
				this.menutop = res[0].top
			})

			if (op && op.keyword) {
				this.keyword = op.keyword
			}
			this.getList()
			this.getArealist()
			this.getCateList()
		},
		onPageScroll(e) {
			// 如果页面滚动的高度大于筛选组件距离顶部的高度，那就置顶，反之不置顶
			if (e.scrollTop > this.menutop) {
				this.isfixed = true
			} else {
				this.isfixed = false
			}
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.nomore) return
			this.page++
			this.getList({
				keyword: this.keyword,
				area: this.area.name == '地区' ? '' : this.area.name,
				id: this.cate.id,
				pid: this.sonCate.pid,
				price: this.price == '价格' ? '全部' : this.price
			})
		},
		methods: {
			init() {
				this.list = []
				this.nomore = false
				this.page = 1
			},
			async getList(params = {}) {
				const res = await getZiZhiList({
					page: this.page,
					keyword: this.keyword,
					...params
				})
				if (res.code == 1) {
					if (res.data.list.length == 0) {
						this.nomore = true
						return
					}
					this.list = [...this.list, ...res.data.list]

				}
			},
			// 去资质详情
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.id
				})
			},
			// 搜索
			onSearch() {

				this.init()
				this.getList({
					area: this.area.name == '地区' ? '' : this.area.name,
					id: this.cate.id,
					pid: this.sonCate.pid,
					price: this.price == '价格' ? '全部' : this.price
				})
			},
			async getArealist() {
				const res = await getArea()

				if (res.code == 1) {
					this.areaColumns[0] = res.data
				}
			},
			// 宫格区点击
			toDetail(item) {
				switch (item.name) {
					case '我要转让':
						uni.switchTab({
							url: '/pages/sale/sale'
						})
						break;
					case '代入驻':
						console.log('代入驻')
						break;
					case '资质评估':
						console.log('资质评估')
						break;
					default:
						uni.navigateTo({
							url: '/pages/buy/buyShop'
						})
						break;
				}
			},
			// 选择地区
			confirmArea(e) {

				this.area = e.value[0]
				this.showArea = false
				this.init()
				this.getList({

					area: this.area.name == '地区' ? '' : this.area.name,
					id: this.cate.id,
					pid: this.sonCate.pid,
					price: this.price == '价格' ? '全部' : this.price
				})
			},
			async getCateList() {
				const res = await getCate()
				if (res.code == 1) {
					this.cateColumns[0] = res.data.list
				}
			},
			// 选择大类
			confirmCate(e) {
				// 赋值大类
				this.cate = e.value[0]
				// 大类对应的子类列表
				this.sonCateColumns[0] = this.cate.son
				this.showCate = false
				this.init()
				this.getList({

					area: this.area.name == '地区' ? '' : this.area.name,
					id: this.cate.id,
					pid: this.sonCate.pid,
					price: this.price == '价格' ? '全部' : this.price
				})
			},
			// 选择价格
			confirmPrice(e) {
				this.price = e.value[0]
				this.showPrice = false
				this.init()
				this.getList({
					area: this.area.name == '地区' ? '' : this.area.name,
					id: this.cate.id,
					pid: this.sonCate.pid,
					price: this.price == '价格' ? '全部' : this.price
				})
			},
			// 选择子类型
			confirmSonCate(e) {
				this.sonCate = e.value[0]
				this.showSonCate = false
				this.getList({
					area: this.area.name == '地区' ? '' : this.area.name,
					id: this.cate.id,
					pid: this.sonCate.pid,
					price: this.price == '价格' ? '全部' : this.price
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
		/* padding-top: 465rpx; */
	}
</style>
<style lang="scss">
	.is_fixed {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		width: 100%;
		background-color: #fff;
	}

	.fixed {
		// position: fixed;

		background-color: #ffffff;

		.search-box {
			padding: 20rpx;
			background-color: #ffffff;


		}

		.baozhang {
			background-color: #fff;
			padding: 30rpx 60rpx;
			color: #999;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.baozhang_txt {
				display: flex;
				align-items: center;
			}
		}

		.icon_box {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 10rpx;

				.item-img {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.item-name {
					font-size: 24rpx;
					color: #999;
					margin-top: 25rpx;
				}
			}
		}

		.tabs {

			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx 0;
			border-top: 1px solid #eee;
			box-shadow: 0px 16px -5px rgba(255, 255, 255, .6);

			.tab_item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #666;
				white-space: nowrap;
			}
		}
	}

	.list {
		.list_item {
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0px 0px 10rpx rgba(0, 0, 0, .1);
			padding: 30rpx;
			margin: 30rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #999;
				font-size: 28rpx;
				margin-bottom: 30rpx;

				.top-left {
					background-color: #fff;
					border: 1px solid #ff4b32;
					color: #ff4b32;
					font-size: 18rpx;
					border-radius: 10rpx;
					width: fit-content;
					padding: 5rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.title {

				font-size: 30rpx;

				color: #333;
				line-height: 1.5em;
				display: -webkit-box;
				line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				display: -webkit-inline-box;
				/* Safari 和 Chrome */

			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid #eee;
				margin-top: 20rpx;
				padding: 30rpx 0 0;

				.price {
					font-size: 40rpx;
					color: #ff4b32;
					font-weight: 600;
				}

				.tag {
					font-size: 20rpx;
					color: #666;
					background-color: #f7f8f9;
					padding: 10rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>